<template>
  <div ref="main" id="main"></div>
</template>
<script>
import echarts from "echarts";
export default {
  props: {
    // 总数
    sum: {
      type: String,
      default: "0"
    },
    reachNum: {
      // 已达标个数
      type: String,
      default: "0"
    }
  },
  mounted() {
    this.pieChart();
  },
  methods: {
    pieChart() {
      // 通过ref获取节点，解决父组件只会出现一个echart的问题
      let myChart = echarts.init(this.$refs.main);
      let option = {
        // tooltip: { // 设置鼠标悬浮文本提示
        // //   trigger: "item",
        // //   formatter: "{d}%" // d: 百分比  c: 数值
        // },
        legendHoverLink: false,
        series: [
          {
            type: "pie",
            name: "底层圆弧",
            z: 1,
            startAngle: 0,
            radius: ["90%", "35%"],
            hoverAnimation: false, // 禁止悬浮动画
            labelLine: {
              normal: {
                show: false
              }
            },
            label: {
              show: false
            },
            data: [
              {
                value: this.sum,
                itemStyle: {
                  normal: {
                    color: "white"
                  }
                }
              },
              {
                value: this.sum,
                itemStyle: {
                  borderColor: "#ccc",
                  color: "white",
                  emphasis: {
                    color: "white"
                  }
                }
              }
            ]
          },
          {
            name: "顶层圆弧",
            type: "pie", // 饼图
            //起始刻度的角度，默认为 90 度，即圆心的正上方。0 度为圆心的正右方。
            startAngle: 0,
            hoverAnimation: false,
            tooltip: {},
            radius: ["90%", "47%"], // 半径
            center: ["50%", "50%"], // 中心坐标
            // roseType: "radius", // 控制扇形图圆弧大小
            label: {
              // 将饼图中间的数据居中
              normal: {
                show: false,
                position: "center"
              }
            },
            z: 7,
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              // 该饼图的数据
              {
                value: this.sum,
                itemStyle: {
                  normal: {
                    color: "white"
                  },
                  emphasis: {
                    color: "white"
                  }
                }
              },
              {
                value: this.reachNum, // 渐变色部分
                itemStyle: {
                  normal: {
                    color: "#00cc00"
                  },
                  emphasis: {
                    color: "#00cc00"
                  }
                },
                label: {
                  // 展示数据
                  normal: {
                    show: true,
                    formatter: `{@[${this.reachNum}]}%`, // d:数值 c:百分比
                    // formatter: "{d{",
                    textStyle: {
                      fontSize: 20,
                      color: "#000000"
                      // fontWeight: "bolder",
                    }
                  }
                }
              },
              {
                value: this.sum - this.reachNum, // 右侧部分
                itemStyle: {
                  normal: {
                    color: "#808080"
                  }
                }
              }
            ]
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }
  }
};
</script>
<style scoped>
#main {
  width: 100%;
  height: 100%;
  z-index: 1;
}
</style>